<template>
  <div>
    <el-form :inline="true" :model="askForLeaveVo">
      <el-form-item label="用户名">
        <el-input
          v-model="askForLeaveVo.name"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="请假天数">
        <el-input
          v-model="askForLeaveVo.days"
          placeholder="请输入请假天数"
        ></el-input>
      </el-form-item>
      <el-form-item label="请假原因">
        <el-input
          v-model="askForLeaveVo.reason"
          placeholder="请输入请假原因"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAskForLeave">请假</el-button>
        <el-button @click="resetAskForLeaveVo">请假</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" :model="queryTaskVo">
      <el-form-item label="身份凭证">
        <el-input
          v-model="queryTaskVo.identity"
          placeholder="请输入身份凭证"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryApplyTasks"
          >查询审批任务</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="applyTasks">
      <el-table-column prop="id" label="任务id" />
      <el-table-column prop="name" label="提交人" />
      <el-table-column prop="days" label="请假天数" />
      <el-table-column prop="reason" label="请假原因" />
      <el-table-column label="操作" width="350%">
        <template v-slot:default="scope">
          <el-button type="primary" @click="approve(scope.row)">批准</el-button>
          <el-button type="danger" @click="reject(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form :inline="true" :model="queryMyTaskVo">
      <el-form-item label="提交人">
        <el-input
          v-model="queryMyTaskVo.name"
          placeholder="请输入提交人"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryMyTasks"
          >查询我提交的任务</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="myTasks">
      <el-table-column prop="name" label="提交人" />
      <el-table-column prop="days" label="请假天数" />
      <el-table-column prop="reason" label="请假原因" />
      <el-table-column prop="status" label="审批状态">
        <template v-slot:default="scope">
          {{scope.row.status ? '同意' : '拒绝'}}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
    </el-table>
  </div>
</template>

<script>
import { getReq, postReq, putReq } from "@/js/axios.js";

export default {
  name: "SysUser",
  data() {
    return {
      askForLeaveVo: {
        name: "",
        days: null,
        reason: "",
      },
      queryTaskVo: {
        identity: "managers",
      },
      queryMyTaskVo: {
        name: "username1",
      },
      applyTasks: [],
      myTasks:[],
      reviewInfo: {
        taskId: null,
        name: "",
        approve: null,
      },
    };
  },
  methods: {
    submitAskForLeave() {
      postReq("/flowable/test/askForLeave/submit", this.askForLeaveVo).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
          } else {
            this.$alert(res.data.message);
          }
        }
      );
    },
    resetAskForLeaveVo() {
      this.askForLeaveVo = {};
    },
    queryApplyTasks() {
      getReq(
        "/flowable/test/askForLeave/apply/leaveList?identity=" +
          this.queryTaskVo.identity
      ).then((res) => {
        if (res.data.code == 200) {
          this.applyTasks = res.data.data;
          this.$message.success(res.data.message);
        } else {
          this.$alert(res.data.message);
        }
      });
    },
    approve(row) {
      this.reviewInfo.approve = true;
      this.reviewInfo.name = row.name;
      this.reviewInfo.taskId = row.id;
      postReq("/flowable/test/askForLeave/review", this.reviewInfo).then(
        (res) => {
          if (res.data.code == 200) {
            this.queryApplyTasks();
            this.$message.success(res.data.message);
          } else {
            this.$alert(res.data.message);
          }
        }
      );
    },
    reject(row) {
      this.reviewInfo.approve = false;
      this.reviewInfo.name = row.name;
      this.reviewInfo.taskId = row.id;
      postReq("/flowable/test/askForLeave/review", this.reviewInfo).then(
        (res) => {
          if (res.data.code == 200) {
            this.queryApplyTasks();
            this.$message.success(res.data.message);
          } else {
            this.$alert(res.data.message);
          }
        }
      );
    },
    queryMyTasks(){
getReq(
        "/flowable/test/askForLeave/queryMyTasks?name=" +
          this.queryMyTaskVo.name
      ).then((res) => {
        if (res.data.code == 200) {
          this.myTasks = res.data.data;
          this.$message.success(res.data.message);
        } else {
          this.$alert(res.data.message);
        }
      });
    }
  },
  created: function () {},
};
</script>